🎨 Palette: Make dynamic loading text accessible#199
🎨 Palette: Make dynamic loading text accessible#199thebearwithabite wants to merge 1 commit intomasterfrom
Conversation
💡 What: Added `aria-live="polite"` and `aria-atomic="true"` to the cycling loading messages in the `LoadingIndicator` component. 🎯 Why: Without these attributes, screen readers silently ignore updates to dynamic text, leaving visually impaired users unaware of progress or changing status messages. ♿ Accessibility: Ensures that dynamically cycling content is properly announced by screen readers without unnecessarily interrupting the user. Co-authored-by: thebearwithabite <216692431+thebearwithabite@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
I've added a small UX/accessibility enhancement to
frontend_v2/src/components/veo/LoadingIndicator.tsx.The
LoadingIndicatorcomponent cycles through a list of loading messages every few seconds. However, this dynamically changing text was inaccessible to screen readers because it lacked the appropriate ARIA live region attributes.I've added
aria-live="polite"andaria-atomic="true"to the<p>tag containing the text. This is a crucial micro-UX improvement that ensures screen reader users are properly informed of the changing loading status without being overly interrupted.I also added an entry to
.jules/palette.mdto document this critical learning regarding dynamically changing text elements.Tested by running
pnpm buildinfrontend_v2.PR created automatically by Jules for task 10568401861781719632 started by @thebearwithabite